<template>
  <div class="game-list-container">
    <h2 class="game-list-title">热门游戏推荐</h2>
    <div v-for="game in games" :key="game.id" class="game-item">
      <div class="game-image">
        <img :src="game.imageUrl" :alt="game.name" />
      </div>
      <div class="game-info">
        <h3>{{ game.name }}</h3>
        <p class="game-description">{{ game.description }}</p>
        <div class="game-meta">
          <span class="game-price">¥{{ game.price }}</span>
          <span class="game-rating">评分: {{ game.rating }}/5</span>
        </div>
        <router-link :to="`/games/${game.id}`" class="game-detail-link">查看详情</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameList',
  data() {
    return {
      games: []
    }
  },
  async created() {
    try {
      const response = await this.$http.get('/games')
      this.games = response.data
    } catch (error) {
      console.error('获取游戏列表失败:', error)
    }
  }
}
</script>

<style scoped>
.game-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.game-list-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}
.game-item {
  display: flex;
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-image {
  width: 200px;
  margin-right: 20px;
}
.game-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.game-info {
  flex: 1;
}
.game-description {
  color: #666;
  margin: 10px 0;
}
.game-meta {
  display: flex;
  margin: 15px 0;
}
.game-price {
  font-weight: bold;
  color: #ff6700;
  margin-right: 20px;
}
.game-rating {
  color: #666;
}
.game-detail-link {
  display: inline-block;
  padding: 8px 15px;
  background: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
.game-detail-link:hover {
  background: #3aa876;
}
</style>